<template>
	<view class="box">
		<view class="boxList">
			<!-- 日期 -->
			<view class="timeObj">
				<text class="timeTxt">{{updataTime(info.planStartTime) }}</text>
				<view v-if="info.status=='1'">
					<view class="status" v-if="remainingTime">
						<view class="hr">

						</view>
						<text style="margin-left: 10rpx;">已报名</text>
					</view>
					<view class="status" v-else>
						<view class="hr" style="background-color: #EB4F51;">

						</view>
						<text style="margin-left: 10rpx;color: #EB4F51;">已结束</text>
					</view>
				</view>
				<view class="" v-else>
					<view class="countdown" v-if="remainingTime">
						仅剩
						<text class="icon" v-if="remainingTime.day!='00'">{{remainingTime.day}}</text>
						<text v-if="remainingTime.day!='00'">天</text>
						<text class="icon">{{remainingTime.hours}}</text>
						时
						<text class="icon">{{remainingTime.minutes}}</text>
						分
						<text class="icon">{{remainingTime.seconds}}</text>
						秒
					</view>
					<view class="status" v-else>
						<view class="hr" style="background-color: #EB4F51;">

						</view>
						<text style="margin-left: 10rpx;color: #EB4F51;">已结束</text>
					</view>
				</view>


				<!--  -->

			</view>
			<!-- 作业 -->
			<view class="boxtxt">
				<text class="t">作业时段</text>
				<text class="ts">{{info.rockTypeName}}</text>
			</view>
			<!-- 时间区间 -->
			<view class="timeCenter">
				<text class="t">{{info.planStartTime}}</text>
				<image class="icon" src="/static/right.png"></image>
				<text class="t">{{info.planEndTime}}</text>
			</view>
			<!-- 主要内容 -->
			<view class="boxMain">
				<view class="boxMainLeft">
					<view class="qi">
						<image class="icon" src="/static/img/car/icon2.png"></image>
						<view class="text">
							{{info.startingPlace}}
						</view>
					</view>
					<view class="qi">
						<image class="icon" src="/static/img/car/icon1.png"></image>
						<view class="text">
							{{info.terminalList[0]}}
						</view>
					</view>
					<view class="leftB1">
						<view class="leftB1-t" v-for="(item,index) in info.terminalList" :key="item">
							<view class="icon">

							</view>
							<text class="txt">{{item}}</text>
						</view>
						<!-- <view class="leftB1-t" style="margin-top: 8rpx;">
							<view class="icon">

							</view>
							<text class="txt">终点点位名称终点点位名称2</text>
						</view> -->
					</view>
				</view>
				<view class="hr">

				</view>
				<view class="boxMainRight">
					<view class="boxMainRight-jd">
						进度
						<text class="t1">{{info.signupCount || 0}}</text>
						<text class="t2">/{{info.planCarNum || 0}}</text>
					</view>
					<view class="boxMainRight-jd" style="margin-top: 20rpx;">
						还差
						<text class="t3">{{info.planCarNum-info.signupCount || 0}}</text>
						<text>人</text>
					</view>
					<view class="boxMainRight-jd" style="margin-top: 20rpx;" v-if="info.budgetMoney">
						<text class="t4">{{info.budgetMoney}}</text>
						<text>{{info.budgetType==1?'元/趟':'元/方/公里'}}</text>
					</view>
					<up-button type="primary" style="margin-top: 18rpx;" text="立即报名" :disabled="!remainingTime"
						v-if='info.status==0 || !info.status ||!remainingTime' @click="getSignUp('1')"></up-button>
					<up-button type="primary" style="margin-top: 18rpx;" v-if="info.status==1&&remainingTime"
						text="取消报名" @click="getSignUp('0')"></up-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onUnmounted, reactive, watchEffect } from 'vue';
	import { signUp } from "@/api/drivers/orderTaking.js"
	import { useUserStore } from '@/stroes';
	import dayjs from 'dayjs';
	import duration from 'dayjs/plugin/duration'
	dayjs.extend(duration)
	const emit = defineEmits(['refresh']);
	const userStore = useUserStore()
	const nowActive = ref(userStore.nowCart)
	watchEffect(() => {
		if (userStore.nowCart) {
			nowActive.value = userStore.nowCart;
		}
	})
	const props = defineProps({
		info: {
			type: Object,
			default: () => ({})
		}
	})
	const remainingTime = ref(null);
	const timer = ref(null)

	// 更新倒计时显示
	const updateRemainingTime = () => {
		// let times='2024-12-12 1:59:59'
		const endTime = new Date(props.info.planEndTime).getTime();
		const now = new Date().getTime();
		const distance = endTime - now;

		if (distance >= 0) {
			remainingTime.value = formatTime(distance);
		} else {
			clearInterval(timer.value);
			remainingTime.value = null;
		}
	}
	const formatTime = (time) => {
		const day = padTime(Math.floor(time / 86400000));
		const hours = padTime(Math.floor((time / (1000 * 60 * 60)) % 24));
		const minutes = padTime(Math.floor((time / (1000 * 60)) % 60));
		const seconds = padTime(Math.floor((time / 1000) % 60));

		return { day, hours, minutes, seconds };
	}
	const padTime = (time) => {
		return time < 10 ? '0' + time : time;
	}

	function getSignUp(val) {
		if (val === '1') {
			uni.navigateTo({
				url: `/pages/drivers/selectCartNew/selectCartNew?type=2&id=${props.info.id}&status=${val}`,
			})
		} else {
			let obj = {
				plateNo: nowActive.value.hphm,
				id: props.info.id,
				status: val
			}
			signUp(obj).then(res => {

				if (res.data.code == 0) {
					uni.showToast({
						title: "取消成功",
						icon: 'none',
						duration: 1000
					})
					emit('refresh');

				} else {
					console.log(res);
				}
			})
		}
	}

	function updataTime(time) {
		if (time) {
			const date = new Date(time);
			return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
		}

	}


	// 组件挂载时开始倒计时
	onMounted(() => {
		updateRemainingTime();
		timer.value = setInterval(updateRemainingTime, 1000);


	})
	// 组件销毁时清除定时器
	onUnmounted(() => {
		clearTimeout(timer.value)
		// timer=null
	})
</script>

<style scoped lang="scss">
	.box {
		// padding: 0 32rpx;
		margin-bottom: 10rpx;

		.boxList {

			background: linear-gradient(46deg, #FFFFFF 0%, #E1EEFF 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 3rpx solid #FFFFFF;
			padding: 22rpx 20rpx;

			.timeObj {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.timeTxt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #0E1624;
					line-height: 38rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.status {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: 500;
					color: #2E87FF;

					.hr {
						width: 12rpx;
						height: 12rpx;
						background: #2E87FF;
						border-radius: 100%;
					}
				}

				.countdown {
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;

					.icon {
						display: inline-block;
						width: 48rpx;
						height: 40rpx;
						background: #2E87FF;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 33rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						text-align: center;
						line-height: 40rpx;
					}
				}

			}

			.boxtxt {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 16rpx;

				.t {
					font-weight: 400;
					font-size: 28rpx;
					color: #2E87FF;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.ts {
					display: inline-block;
					min-width: 82rpx;
					padding: 5rpx 5rpx;
					height: 40rpx;
					background: rgba(46, 135, 255, 0.1);
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					border: 2rpx solid #2E87FF;
					font-weight: 400;
					font-size: 24rpx;
					color: #2E87FF;
					line-height: 40rpx;
					text-align: center;
					font-style: normal;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.timeCenter {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 14rpx;

				.t {
					font-family: Rubik, Rubik;
					font-weight: 500;
					font-size: 28rpx;
					color: #0E1624;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.icon {
					width: 46rpx;
					height: 28rpx;
				}

			}

			.boxMain {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 14rpx;

				.boxMainLeft {
					.qi {
						display: flex;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;

						.text {
							width: 400rpx;
						}
					}

					.icon {
						width: 44rpx;
						height: 44rpx;
						margin-right: 8rpx;
					}

					.leftB1 {
						width: 400rpx;
						// height: 112rpx;
						min-height: 112rpx;
						padding: 20rpx 0rpx;
						margin-top: 18rpx;
						background: #DFF1F4;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						display: flex;
						// align-items: center;
						justify-content: center;
						flex-direction: column;

						.leftB1-t {
							display: flex;
							align-items: center;
							margin-left: 22rpx;
							width: 350rpx;
							margin-bottom: 10rpx;

							.icon {
								width: 12rpx;
								height: 12rpx;
								background: #39B791;
								border-radius: 100%;
							}

							.txt {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #39B791;
								line-height: 28rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
						}
					}
				}

				.hr {
					width: 0;
					height: 221rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					border: 2rpx solid #989DA5;
					opacity: 0.2;
				}

				.boxMainRight {
					.boxMainRight-jd {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;

						.t1 {
							color: #2E87FF;
							font-size: 28rpx;
						}

						.t2 {
							color: #000000;
							font-size: 28rpx;
						}

						.t3 {
							color: #EB4F51;
							font-size: 28rpx;
						}

						.t4 {
							font-size: 36rpx;
							color: #EB4F51;
							font-weight: bold;
						}
					}
				}
			}
		}

	}
</style>